<template>
	<view class="guoqing-bot tn-bg-gray--light">
		<view class="chunk tn-margin-bottom-sm">
			<view class="title">
				<text>提示</text>
			</view>
			<view class="content">
				<view>一、上传需要去除背景的图片</view>
				<view>二、请耐心等待~</view>
			</view>
		</view>
		<view class="chunk tn-margin-bottom-sm">
			<view class="title">
				<text>上传图片</text>
			</view>
			<view class="content">
				<tn-image-upload :action="action" :fileList="fileList" :maxCount="1" @on-remove="removeFileManager" @on-success="successFileManager"></tn-image-upload>
			</view>
		</view>
		<view class="chunk tn-margin-bottom-sm">
			<view class="title">
				<text>生成结果</text>
			</view>
			<view class="content result-file">
				<image class="tn-width-full tn-height-full" :src="resultFile" mode="aspectFit" @click="previewImage"></image>
			</view>
		</view>
		<view class="submit-btn">
			<tn-button shape="round" :backgroundColor="loading ? '#1d254187' : '#1D2541'" fontColor="#ffffff" width="100%" shadow size="lg" :loading="loading" :disabled="loading" @click="submitManager">
				提 交
			</tn-button>
		</view>
		<view v-if="loading" class="cover-mask">
			<tn-loading size="86"></tn-loading>
		</view>
		<!-- 背景颜色选择器 -->
		<tn-select v-model="bgColorShow" mode="single" :list="bgColorList" @confirm="bgCheckedConfirm"></tn-select>
	</view>
</template>

<script>
	import { getWorkflowRun } from '@/api/coze.js'
	import wxUrlConfig from '@/common/config.js'
	export default {
		data() {
			return {
				action: '/api/file/upload/oss/kodo',
				fileList: [],
				avatarFile: '',
				resultFile: '',
				loading: false,
				workflow_id: null
			}
		},
		onLoad(params) {
			this.workflow_id = params.workflow_id
			this.action = wxUrlConfig.urlConfig + this.action
		},
		methods: {
			removeFileManager(currentIndex, lists, index) {
				this.fileList = []
				this.avatarFile = ''
			},
			successFileManager(data) {
				this.avatarFile = data.url
			},
			previewImage(index) {
				console.log(index)
				if(!this.resultFile) {
					return
				}
				let that = this;
				uni.previewImage({
					urls: [this.resultFile], // 预览的图片数组
					current: this.resultFile, // 点击预览时，显示的第一张图片
					longPressActions: {
						itemList: ['保存图片'], // 长按预览图片时显示的操作菜单
						success: function(data) {
							// 用户点击了保存图片操作
							that.saveImage(that.resultFile);
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			saveImage(url) {
				// 下载图片
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							// 保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "success"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请检查权限",
										icon: "none"
									});
								}
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
			submitManager() {
				if (!this.avatarFile) {
					uni.showToast({
						icon: 'none',
						title: '请上传图片',
						duration: 2000
					});
					return
				}
				this.loading = true
				this.getWorkflowRunInterface()
			},
			// 调用工作流接口
			getWorkflowRunInterface() {
				const params = {
					workflow_id: this.workflow_id,
					parameters: {
						source_image: this.avatarFile
					}
				}
				getWorkflowRun(params).then(res => {
					this.loading = false
					if(res && res.success) {
						let data = JSON.parse(res.data)
						this.resultFile = data.output
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.guoqing-bot {
		min-height: 100vh;
		padding: 20rpx 30rpx;
	}
	.chunk {
		padding: 20rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		.title {
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.result-file {
			width: 200rpx;
			height: 200rpx;
			overflow: hidden;
			border-radius: 10rpx;
		}
	}
	.submit-btn {
		width: 100%;
		position: fixed;
		left: 0;
		padding: 0 40rpx;
		bottom: env(safe-area-inset-bottom);
	}
	.cover-mask {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999999;
	}
</style>